<template>
    <div class="width_picker">
        <div class="width_wrap" v-for="width in widths" :key="width">    
            <div class="item" @click="chooseWidth(width)">
                <div class="width_item"  :style="'background-color:'+color+';width:'+width+'px;height:'+width+'px'"></div>                
            </div>   
            <div class="tip">{{width}}</div>
        </div>
    </div>
</template>

<script>
export default {
  props: {
    color: String
  },
  data() {
    return {
      widths: [2, 4, 6, 10, 18]
    };
  },
  methods: {
    chooseWidth(width) {
      this.$emit("choose-width", width);
    }
  }
};
</script>

<style scoped>
.width_picker {
  background-color: #f5f1eb;
  padding: 20px 0;
  border-radius: 20px 20px 0 0;
}
.width_wrap {
  display: block;
  float: left;
  width: 20%;
}

.item{
    margin: 10px auto;
    width: 30px;  
    height: 30px;  
}

.width_item {
  margin: auto;
  border-radius: 50%;
}

.tip{
   text-align: center;
}
</style>
